<template>
  <div class="tmpl">
    <div>
      <h4>{{movieList.title}}</h4>
      <div ref="moveul">
        <ul class="moviebox clearfix" ref="boxwidth">
          <li v-for="item in movieList.subjects">
            <a href="#" class="imgbox" ref="imgwidth">
              <img :src="item.images.medium" alt="">
              <p>{{item.title}}</p>
              <!--传入一个星星组件-->
              <star class='size' :score="item.rating.average" v-show="item.rating.average==0?false:true"></star>
              <span class="grade">{{item.rating.average =='00'?'暂无评分':item.rating.average}}</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  //接收一个url后缀进行请求
  //导入滑动组件
  import BScroll from 'better-scroll'//回弹插件
  //导入星星组件
  import star from '../star.vue'
  //导出组件
  export default{
    props: ['url'],
    components: {
      star
    },
    data(){
      return {
        movieList: []
      }
    },
    methods: {
      // 使用better-scroll实现左右滑动
      _initScroll() {
        new BScroll(this.$refs.moveul, {
          scrollX: true,
          eventPassthrough: 'vertical',
          click: true
        })
      },
      getMovieList(){
        // 钩子函数 实例被创建 并且拥有属性和方法的时候调用
        // 由于大部分相同 所以数据写死
        var opt = {
          params: {
            'count': 6,
            'start': 0,
            'apikey': '00fa6c0654689a0202ef4412fd39ce06'
          }
        }
        this.$http.jsonp(this.url,opt).then((res)=> {
          this.movieList = res.body
          this.$nextTick(() => {
            this._initScroll()
          })
        })
      },
      getWidth(){
          var boxWidth = this.$refs.boxwidth;
          var imgWidth = this.$refs.imgwidth[0].offsetWidth;
          var count = parseInt(this.movieList.count)+1;
          boxWidth.style.width = imgWidth*count+'px';
          console.log(imgWidth * count + 'px');
      }
    },
    created(){
      this.getMovieList();
    },
    updated(){
        this.getWidth();
      this._initScroll();
    }
  }
</script>
<style scoped>
  .moviebox{
    list-style: none;
    padding: 0;
    width: 800px;
  }
  .moviebox li{
    float: left;
  }
  .tmpl{
    overflow: hidden;
  }
  h4 {
    margin:15px 0 0 15px;
  }
  .imgbox{
    float: left;
    text-align: center;
  }
  .imgbox  img{
    padding: 10px;
    height: 170px;
  }
  .imgbox p{
    font-size: 12px;
  }
  .size {
    width: auto;
  }
  .size span {
    width: 13px;
    height: 13px;
  }
</style>
